<template>
  <div class="report">
    <el-dropdown trigger="click">
      <div class="el-dropdown-link">
        <el-icon class="el-dropdown-icon">
          <DocumentAdd />
        </el-icon>
        <span class="el-dropdown-text">工作报告</span>
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>Action 1</el-dropdown-item>
          <el-dropdown-item>Action 2</el-dropdown-item>
          <el-dropdown-item>Action 3</el-dropdown-item>
          <el-dropdown-item disabled>Action 4</el-dropdown-item>
          <el-dropdown-item divided>Action 5</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.report {
  background-color: #fff;
  border-radius: 3px;
  margin: 0 7px;
  :deep(.el-dropdown) {
    line-height: 40px;
    .el-dropdown-link {
      width: 116px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      .el-dropdown-text {
        margin-left: 5px;
      }
      .el-dropdown-icon {
        color: var(--el-color-primary);
        font-size: 17px;
      }
    }
  }
}
</style>
